<template>
  <van-nav-bar title="列表" placeholder fixed />
  <div class="box">
    <div class="leftbox">
      <van-sidebar v-model="active">
        <van-sidebar-item
          v-for="(item, index) in list"
          :key="index"
          :title="item"
          @click="aside(item, index)"
        />
      </van-sidebar>
    </div>
    <div class="rightbox-wrapper">
      <div class="rigthbox">
        <div class="smallbox" v-for="item in obj" :key="item.goods_id">
          <img :src="item.img_big_logo" alt="" class="img" @click="detail(item)" />
          <div class="van-multi-ellipsis--l2">
            {{ item.title }}
          </div>
          <p class="totalprice">{{ item.current_price }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { categoryreq, lbreq } from '../../api/requies'

export default {
  methods: {
    detail(item) {
      console.log(item.goods_id)
      this.$router.push({
        path: '/detail',
        query: { id: item.goods_id }
      })
    },
    loadlist() {
      categoryreq().then((r) => {
        console.log(r.data)
        this.list = r.data.list
      })
    },
    aside(item) {
      lbreq(item).then((r) => {
        this.obj = r.data.list
        console.log(this.obj)
      })
    }
  },
  data() {
    return {
      active: 0,
      list: [],
      obj: []
    }
  },
  mounted() {
    this.loadlist()
    this.aside(this.list[0])
  }
}
</script>
<style lang="scss">
$he: 100px;

.van-sidebar,
.leftbox {
  height: calc(100vh - $he);
  position: fixed;
}
.box {
  display: flex;
  flex-direction: row;
}
.van-col .van-col--12 {
  height: 100px;
}
.rightbox-wrapper {
  flex: 1;
  overflow-y: auto;
}
.rigthbox {
  margin-left: 80px;
  box-sizing: border-box;
  padding-top: 10px;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-around;
  margin-bottom: 350px;
  .smallbox {
    width: 130px;
    height: 180px;
  }
}
.img {
  width: 100%;
  height: 100px;
}
.totalprice {
  display: flex;
  justify-content: end;
  padding-right: 20px;
  color: red;
}
</style>
